<template>
  <div class="search">
    <div class="aaa" v-show="history.length">
      <div class="time">
        <span class="iconfont icon-shijian"></span>
        <span>历史搜索</span>
        <span class="clear" @click="clearHistory">清空历史记录</span>
      </div>

      <ul>
        <li v-for="(item, index) in history" :key="index" @click="goSearchList(item)">{{ item }}</li>
      </ul>
    </div>

    <div class="bbb" v-show="!history.length">
      <h3>无历史记录</h3>
    </div>
  </div>
</template>

<script>
import { MessageBox } from "mint-ui";
export default {
  data() {
    return {
      history: [],
    };
  },
  methods: {
    clearHistory() {
  
      MessageBox({
        title: "提示",
        message: "确定执行此操作?",
        showCancelButton: true,
      }).then((res)=>{
        // 点击取消 cancel 点击确认 confirm

        if(res == 'confirm'){
          localStorage.removeItem('searchList')
          this.history = []
        }
      })

    },
    goSearchList(item){
      this.$router.push({
        name:'list',
        query:{
          key:item
        }
      })
    }
  },
  created() {
    this.history = JSON.parse(localStorage.getItem("searchList")) || [];
  },
};
</script>

<style scoped>
.clear {
  display: inline-block;
  margin-left: 132px;
  border: 1px solid #ccc;
  padding: 5px;
  font-size: 12px !important;
}
.time {
  margin-bottom: 10px;
}
.icon-shijian {
  font-size: 18px;
  color: darkred;
  padding-right: 10px;
}
.time span {
  font-size: 18px;
}
ul {
  display: flex;
  flex-wrap: wrap;
}
ul > li {
  font-size: 14px;
  list-style: none;
  border: 1px solid #ccc;
  padding: 5px;
  margin-right: 15px;
  margin-bottom: 10px;
  white-space: nowrap;
}
.search {
  padding: 20px;
  background-color: #f5f5f5;
  height: 200px !important;
}
</style>